<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>社区服务管理系统</title>
    <link href="css/container.css" rel="stylesheet">
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>

<body>
<div id="app">

    <!--顶部-->
    <div class="bg-purple-light">
        <el-row>
            <el-col :span="12">
                <div class="grid-content"
                     style="align-items: center; display: flex;">
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 20px">
                        <el-breadcrumb-item><a href="/index">
                            <el-button type="text" style="font-size: large; margin-left: 10px">首页</el-button>
                        </a></el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content" style="align-items: center; display: flex">
                    <div style="margin-right: 240px"></div>
                    <el-dropdown>
                        <i class="el-icon-bell" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><span @click="announcement4save">
                                发布公告</span></el-dropdown-item>
                            <el-dropdown-item><span @click="showAnnouncement">
                                公告信息</span></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-dropdown>
                        <i class="el-icon-message" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><span @click="showMessage">用户留言</span></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><span @click="openInfo">查看个人信息</span></el-dropdown-item>
                            <el-dropdown-item><span @click="outLogin">退出登录</span></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
            </el-col>
        </el-row>
    </div>

    <!--主容器-->
    <el-container style="height: 600px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238,246,243)">
            <el-menu :default-openeds="['1','1-1','1-2','1-3']">
                <!--楼宇管理-->
                <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-grid"></i><span>楼宇管理</span>
                        </template>
                    <el-submenu title="A区" index="1-1">
                        <template slot="title"><i class="el-icon-menu"></i>
                            <span>A区</span></template>
                        <el-menu-item index="1-1-1" @click="showHouse(1)">一栋</el-menu-item>
                        <el-menu-item index="1-1-2" @click="showHouse(2)">二栋</el-menu-item>
                        <el-menu-item index="1-1-3" @click="showHouse(3)">三栋</el-menu-item>
                    </el-submenu>
                    <el-submenu title="B区" index="1-2">
                        <template slot="title"><i class="el-icon-menu"></i>B区</template>
                        <el-menu-item index="1-2-1" @click="showHouse(4)">一栋</el-menu-item>
                        <el-menu-item index="1-2-2" @click="showHouse(5)">二栋</el-menu-item>
                    </el-submenu>
                    <el-submenu title="C区" index="1-3">
                        <template slot="title"><i class="el-icon-menu"></i>C区</template>
                        <el-menu-item index="1-3-1" @click="showHouse(6)">一栋</el-menu-item>
                        <el-menu-item index="1-3-2" @click="showHouse(7)">二栋</el-menu-item>
                        <el-menu-item index="1-3-3" @click="showHouse(8)">三栋</el-menu-item>
                        <el-menu-item index="1-3-4" @click="showHouse(9)">四栋</el-menu-item>
                    </el-submenu>

                </el-submenu>
                <!--楼管信息-->
                <el-menu-item index="2" @click="showCleaner">
                    <template slot="title"><i class="el-icon-s-data"></i>楼管信息</template>
                </el-menu-item>
                <!--用户信息-->
                <el-menu-item index="3" @click="showResident">
                    <template slot="title"><i class="el-icon-s-data"></i>用户信息</template>
                </el-menu-item>
            </el-menu>
        </el-aside>

        <!--楼宇信息表格-->
        <el-container v-show="buildingTable">
            <el-main>
                <el-table :data="houseData">
                    <el-table-column prop="id" label="房屋号" width="240">
                    </el-table-column>
                    <el-table-column prop="number" label="房屋人数" width="220">
                    </el-table-column>
                    <el-table-column prop="property" label="房屋性质">
                    </el-table-column>
                    <el-table-column prop="ownerId" label="户主号">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>

        <!--楼管信息表格-->
        <el-container v-show="cleanerTable">
            <el-main>
                <el-table :data="cleanerData">
                    <el-table-column prop="region" label="所属区域">
                    </el-table-column>
                    <el-table-column prop="ridgepole" label="所属楼栋">
                    </el-table-column>
                    <el-table-column prop="administrator" label="楼管姓名">
                    </el-table-column>
                    <el-table-column prop="cleaner" label="保洁姓名">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>

        <!--用户信息表格-->
        <el-container v-show="residentTable">
            <el-main>
                <el-table :data="residentData">
                    <el-table-column prop="id" label="用户号">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="age" label="年龄">
                    </el-table-column>
                    <el-table-column prop="phoneNum" label="联系电话">
                    </el-table-column>
                    <el-table-column prop="houseId" label="房屋号">
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页工具条-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageInfo.currentPage"
                        :page-sizes="[10, 15, 20]"
                        :page-size="pageInfo.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>

            </el-main>
        </el-container>
    </el-container>

    <!--个人信息表单-->
    <el-dialog
            title="个人信息"
            :visible.sync="infoDialog"
            width="40%">
            <el-form label-width="130px" :model="userInfo">
                <el-form-item label="用户id:">
                    {{userInfo.id}}
                </el-form-item>
                <el-form-item label="用户名称:">
                    {{userInfo.nickName}}
                </el-form-item>
                <el-form-item label="联系电话:">
                    {{userInfo.phone}}
                </el-form-item>
                <el-form-item label="个人简介:">
                    {{userInfo.description}}
                </el-form-item>
            </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="infoDialog = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!--编辑用户信息表单-->
    <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
        <el-form ref="dataEditForm" :model="residentForm" :rules="rules" label-position="right"
                 label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="residentForm.name"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="residentForm.age"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="联系电话" prop="phoneNum">
                        <el-input v-model="residentForm.phoneNum"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
            <el-button type="primary" @click="handleEdit()">确定</el-button>
        </div>
    </el-dialog>

    <!--查看用户留言表格-->
    <el-dialog
            title="留言信息"
            :visible.sync="messageDialog"
            width="70%">
                <el-table :data="messageInfo">
                    <el-table-column prop="senderId" label="用户号" width="120">
                    </el-table-column>
                    <el-table-column prop="content" label="内容" width="280">
                    </el-table-column>
                    <el-table-column prop="createTime" label="发送时间" width="180">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="180">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="openReplyForm(scope.row)">回复</el-button>
                            <el-button type="danger" size="mini" @click="deleteMessage(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="messageDialog = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!--回复表单-->
    <el-dialog
            title="留言回复"
            :visible.sync="replyDialog"
            width="40%"
            :before-close="resetReply">
        <el-form ref="form" :model="replyData" label-width="100px">
            <el-form-item label="回复内容">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入留言内容"
                        v-model="replyData.content">
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetReply">取 消</el-button>
            <el-button type="primary" @click="sendReply">发 送</el-button>
        </span>
    </el-dialog>

    <!--发布公告-->
    <el-dialog
            title="发布公告"
            :visible.sync="announcementDialog"
            width="40%"
            :before-close="resetAnnouncement">
        <el-form ref="form" :model="announcementInfo" label-width="70px">
            <el-form-item label="公告标题">
                <el-input v-model="announcementInfo.titleName"
                          placeholder="请输入公告标题"></el-input>
            </el-form-item>
            <el-form-item label="公告内容">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 4}"
                        placeholder="请输入公告内容"
                        v-model="announcementInfo.content">
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetAnnouncement">取 消</el-button>
            <el-button type="primary" @click="sendAnnouncement">发 送</el-button>
        </span>
    </el-dialog>

    <!--公告信息-->
    <el-dialog
            title="留言信息"
            :visible.sync="announcementTable"
            width="70%">
                <el-table :data="announcementData">
                    <el-table-column prop="id" label="公告号">
                    </el-table-column>
                    <el-table-column prop="titleName" label="公告标题">
                    </el-table-column>
                    <el-table-column prop="senderId" label="管理员号">
                    </el-table-column>
                    <el-table-column prop="createTime" label="发送时间">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="180">
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini" @click="deleteAnnouncement(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="announcementTable = false">关 闭</el-button>
        </span>
    </el-dialog>

</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>
    let token = localStorage.getItem("token")
    axios.interceptors.request.use(
        config => {
            if (token) config.headers['authorization'] = token
            return config
        },
        error => {
            console.log(error)
            return Promise.reject(error)
        }
    )
    new Vue({
        el: '#app',
        data(){
            const item = {
                id: "1",
                name: "yyy",
                age: "18",
                phoneNum: "18784367492",
                houseId: "2"
            };
            const item1 = {
                id: "1",
                number: "4",
                property: "商品房",
                ownerId: "1"
            };
            const item2 = {
                region: "A",
                ridgepole: "1",
                administrator: "语文课",
                cleaner: "菜虚坤"
            };
            const item3 = {
                id: "1",
                content: "寄寄寄摆摆摆",
                senderId: "3",
                createTime: "2022-11-24 21:07:16"
            };
            const item4 = {
                id: "0",
                titleName: "喜迎党的二十大",
                content: "2022年是党的二十大召开之年，也是踏上全面建设社会主义现代化国家、向第二个百年奋斗目标进军新征程的开局之年。而如今，我们正处于百年未有之大变局，这既给我们带来了新的机遇，同样也带来了新的挑战。作为新时代青年，我们必将“以志为先，以新为径，以苦为食”，以青春之名，喜迎党的二十大，在新时代不懈奋斗，建功立业。",
                senderId: "2",
                createTime: "2022-11-26 15:04:39"
            };
            return{
                userInfo: {
                    id: "神马也莫有",
                    phone: "神马也莫有",
                    nickName: "神马也莫有",
                    description: "神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有" +
                        "神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有"
                },
                residentTable: true,
                buildingTable: false,
                cleanerTable: false,
                infoDialog: false,
                residentData: Array(20).fill(item),
                houseData: Array(20).fill(item1),
                cleanerData: Array(20).fill(item2),
                dialogFormVisible4Edit: false,
                residentForm: {},
                rules: {//校验规则
                    name: [{required: true, message: '姓名为必填项', trigger: 'blur'}],
                    age: [{required: true, message: '年龄为必填项', trigger: 'blur'}],
                    phoneNum: [{required: true, message: '联系电话为必填项', trigger: 'blur'}]
                },
                pageInfo: {
                    //每一页最多有几条数据
                    pageSize: 10,
                    // 当前页码
                    currentPage: 1
                },
                //数据总条数
                totalCount: 200,
                messageDialog: false,
                messageInfo: Array(10).fill(item3),
                replyDialog: false,
                replyData: {
                    content: "",
                    receiverId: ""
                },
                announcementDialog: false,
                announcementTable: false,
                announcementInfo: {
                    titleName: "",
                    content: ""
                },
                announcementData: Array(10).fill(item4)
            }
        },
        methods: {
            resetReply(){
                this.replyDialog = false
                this.replyData.content = ""
                this.replyData.receiverId = ""
            },
            announcement4save(){
                this.announcementDialog = true
            },
            resetAnnouncement(){
                this.announcementDialog = false
                this.announcementInfo.titleName = ""
                this.announcementInfo.content = ""
            },
            handleUpdate(row) {
                this.dialogFormVisible4Edit = true
                this.residentForm = row
            },
            handleSizeChange(val){
                /*调配页面显示数时需要执行的方法*/
                this.pageInfo.pageSize = val
                this.getResidentInfo()
            },
            handleCurrentChange(val){
                /*切换当前页面是需要执行的方法*/
                this.pageInfo.currentPage = val
                this.getResidentInfo()
            },
            showResident(){
                this.residentTable =  true
                this.cleanerTable = false
                this.buildingTable = false
            },
            showMessage(){
                this.messageDialog = true
            },
            openReplyForm(row){
                this.replyDialog = true
                this.replyData.receiverId = row.senderId
            },
            openInfo(){
                this.infoDialog = true
                _this = this
                axios.get("/req/getInfo")
                    .then((res) => {
                        _this.userInfo = res.data.data
                    })
            },
            outLogin(){
                if (localStorage.getItem("outlogin") !== "true"){
                    localStorage.setItem("outlogin","true")
                }
                axios.delete("/req/outLogin")
                    .then((res) => {
                        if (res.data.success !== true){
                            this.$message({
                                message: res.data.errorMsg,
                                type: 'warning'
                            })
                        }else {
                            window.location.href="/index"
                        }
                    })
            },
            getResidentInfo(){
                /*分页获取所有用户信息*/
                _this = this
                axios.post("/req/resident/getPage", _this.pageInfo)
                    .then((res) => {
                        if (res.data.success !== true){
                            this.$message({
                                message: res.data.errorMsg,
                                type: 'warning'
                            })
                        }else {
                            /*将值返回到前端页面*/
                            _this.residentData = res.data.data.rows
                            _this.totalCount = res.data.data.totalCount
                        }
                })
            },
            handleEdit(){
                /*将修改的数据保存到数据库*/
                axios.put("/req/resident/putInfo",this.residentForm)
                    .then((res) => {
                        //如果操作成功，关闭弹层，显示数据
                        if (res.data.success === true) {
                            this.dialogFormVisible4Edit = false;
                            this.$message.success("修改成功");
                        } else {
                            this.$message.error(res.data.errorMsg);
                        }
                    }).finally(() => {
                    this.getResidentInfo();
                })
            },
            handleDelete(row) {
                // 1.弹出提示框
                this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {
                    type: 'info'
                }).then(() => {
                    //2.做删除业务
                    axios.delete("/req/resident/delInfo/" + row.id).then((res) => {
                        if (res.data.success === true) {
                            this.$message.success("删除成功");
                        } else {
                            this.$message.error(res.data.errorMsg);
                        }
                    }).finally(() => {
                        this.getResidentInfo();
                    });
                }).catch(() => {
                    //3.取消删除
                    this.$message.info("取消删除操作");
                });
            },
            getMessageInfo(){
                axios.get("/req/message/getInfo")
                .then((res) => {
                    if (res.data.success !== true){
                        this.$message({
                            message: res.data.errorMsg,
                            type: 'warning'
                        })
                    }else {
                        /*将值返回到前端页面*/
                        _this.messageInfo = res.data.data
                    }
                });
            },
            deleteMessage(row){
                //1.弹出提示框
                this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {
                    type: 'info'
                }).then(() => {
                    //2.做删除业务
                    axios.delete("/req/message/delInfo/" + row.id)
                        .then((res) => {
                            if (res.data.success === true) {
                                this.$message.success("删除成功");
                            } else {
                                this.$message.error(res.data.errorMsg);
                            }
                        }).finally(() => {
                        this.getMessageInfo();
                    });
                }).catch(() => {
                    //3.取消删除
                    this.$message.info("取消删除操作");
                });
            },
            sendReply(){
                axios.post("/req/reply/saveReply", this.replyData)
                .then((res) => {
                    if (res.data.success === false){
                        this.$message({
                            message: res.data.errorMsg,
                            type: 'warning'
                        })
                    }else {
                        location.reload()
                        _this.replyDialog = false
                    }
                });
            },
            sendAnnouncement(){
                axios.post("/req/announcement/save", this.announcementInfo)
                .then((res) => {
                    if (res.data.success === false){
                        this.$message({
                            message: res.data.errorMsg,
                            type: 'warning'
                        })
                    }else {
                        location.reload()
                        _this.announcementDialog = false
                    }
                });
            },
            showAnnouncement(){
                this.announcementTable = true
                _this = this
                axios.get("/req/announcement/all")
                    .then((res) => {
                        if (res.data.success !== true){
                            this.$message({
                                message: res.data.errorMsg,
                                type: 'warning'
                            })
                        }else {
                            _this.announcementData = res.data.data
                        }
                    });
            },
            deleteAnnouncement(row){
                //1.弹出提示框
                this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {
                    type: 'info'
                }).then(() => {
                    //2.做删除业务
                    axios.delete("/req/announcement/del/" + row.id)
                        .then((res) => {
                            if (res.data.success === true) {
                                this.$message.success("删除成功");
                            } else {
                                this.$message.error(res.data.errorMsg);
                            }
                        }).finally(() => {
                        this.showAnnouncement();
                    });
                }).catch(() => {
                    //3.取消删除
                    this.$message.info("取消删除操作");
                });
            },
            showHouse(index){
                // axios.get("/house/" + index)
                // .then((res) => {
                //     if (res.data.success !== true){
                //         this.$message({
                //             message: res.data.errorMsg,
                //             type: 'warning'
                //         })
                //     }else {
                //         /*将值返回到前端页面*/
                //         _this.houseData = res.data.data
                //         this.residentTable =  false
                //         this.cleanerTable = false
                //         this.buildingTable = true
                //     }
                // })
            },
            showCleaner(){
                // axios.get("/building")
                //     .then((res) => {
                //         if (res.data.success !== true){
                //             this.$message({
                //                 message: res.data.errorMsg,
                //                 type: 'warning'
                //             })
                //         }else {
                //             /*将值返回到前端页面*/
                //             _this.cleanerData = res.data.data
                //             this.residentTable =  false
                //             this.cleanerTable = true
                //             this.buildingTable = false
                //         }
                //     })
            },
            show(){
                alert("hhh")
            },
        },
        mounted(){
            this.getMessageInfo()
            this.getResidentInfo()
        }
    })
</script>
</body>
</html>